/* VE base styles */
@use "src/styles/globals";

/* Bootstrap */
@use "src/styles/third-party/bootstrap";
@use "sass:color";

/* Stylesheet for transclusion-related elements */
transclude-doc,
transclude-attr,
transclude-val > span,
transclude-name > span,
transclude-val > p,
transclude-com,
transclude-img {
  cursor: pointer;
  border-color: transparent;
}

view {
  // set display inline for nested transcluded paragraphs and first p in table cells
  // to prevent unwanted newlines and excessive spacing in table cells
  mms-cf mms-cf {
    transclude-doc {
      > p:first-child {
        display: inline;
      }
    }
  }

  table td transclude-doc {
    > p:first-child,
    > div:first-child {
      display: inline;
    }
  }
}

.transclude-target,
view.outline,
view.editing {
  /* Transclusions borders when editing mode */
  transclude-doc,
  transclude-attr,
  transclude-name > span,
  transclude-val > span,
  transclude-val > p,
  span.outline {
    @include globals.transition(border 0.3s);
    @include globals.border-radius(5px);

    border: 2px solid globals.$ve-silver-darker-1;
    cursor: pointer;

    // do we want this animation ?
    &:hover {
      border-color: globals.$tertiary-grey;
    }
  }

  transclude-doc,
  transclude-com {
    display: block;

    .panel {
      margin: 0;
    }
  }
}

/* comments */
view transclude-com,
view.editing transclude-com {
  @include globals.border-radius(5px);

  background-color: color.scale(globals.$yellow, $lightness: 10%);
  border: 2px solid color.scale(globals.$yellow, $lightness: -10%);
  padding: 2px;
  display: block;
}

view:not(.editing, .outline) {
  .placeholder {
    visibility: hidden;
  }

  present-paragraph > mms-cf > transclude-doc,
  present-list-t > mms-cf > transclude-doc,
  present-table-t > mms-cf > transclude-doc,
  present-figure > mms-cf > transclude-doc,
  present-equation > mms-cf > transclude-doc,
  present-section {
    border: 2px solid white;
    display: block;
  }

  .view-title transclude-name > span {
    border: 2px solid white;
  }
}

view:not(.reviewing) transclude-com {
  display: none;
}

/* Add a name label that is hidden by default */
transclude-name .input-group > .input-group-addon.transclude-name-label {
  position: absolute;
  top: -1.8em;
  display: table;
  opacity: 0;
  border-radius: 4px 4px 0 0;
  visibility: hidden;

  @include globals.transition(all 0.3s);
}

/* Label becomes visible on hover */
transclude-name:hover .input-group > .input-group-addon.transclude-name-label {
  visibility: visible;
  opacity: 1;
}

/* ------------------------------------------------------------------
Element not found styling
------------------------------------------------------------------- */

.ve-error {
  background: globals.$ve-warning-orange-light;
  background: repeating-linear-gradient(45deg, globals.$white, globals.$white 10px, globals.$ve-warning-orange-light 10px, globals.$ve-warning-orange-light 20px);
  color: globals.$black;
  border: none;
  padding-left: 11px;
}

.ve-error::before {
  content: "\f071";
  font-family: globals.$font-family-icon;
  margin-left: -14px;
  color: globals.$ve-warning-orange;
  font-size: 12px;
  position: absolute;
}

.ve-error:hover {
  background:
    repeating-linear-gradient(
      45deg,
      globals.$white,
      globals.$white 10px,
      color.scale(globals.$ve-warning-orange-light, $lightness: -10%) 10px,
      color.scale(globals.$ve-warning-orange-light, $lightness: -10%) 20px
    );
}

.pane-right .prop.ve-error {
  margin-top: 10px;
}

.mms-png {
  display: none;
}

figcaption,
.caption-type-equation,
caption {
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

transclude-img img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.no-padding-panel {
  padding: 0;
}

.item-type-view,
.item-type-document,
.item-type-group,
.item-type-tag,
.pe-type-paragraph,
.pe-type-paragraph-t,
.pe-type-text,
.pe-type-text-t,
.pe-type-table,
.pe-type-table-t,
.pe-type-image,
.pe-type-image-t,
.pe-type-equation,
.pe-type-comment {
  &::before {
    font-family: globals.$font-family-icon, globals.$icon-font-name !important;
    padding-right: 4px;
  }
}

.item-type-document::before,
.item-type-view::before {
  content: "\f15b";
}

.item-type-group::before {
  content: "\f07b";
  color: color.scale(globals.$ve-accent, $lightness: 20%);
}

.item-type-tag::before {
  content: "\f02b";
}

.pe-type-paragraph::before,
.pe-type-paragraph-t::before,
.pe-type-text::before,
.pe-type-text-t::before {
  content: "\f1dd";
}

.pe-type-table::before,
.pe-type-table-t::before {
  content: "\f0ce";
}

.pe-type-image::before,
.pe-type-image-t::before {
  content: "\f03e";
}

.pe-type-equation::before {
  content: "\f12b";
}

.pe-type-comment::before {
  content: "\f0e5";
}

/* set pseudoclass and reset italic from <i> */
.pe-type-section::before,
.pe-type-section-t::before {
  content: "\00a7";
  font-style: normal;
  font-weight: bold;
  padding-right: 4px;
}

// Make font weight of panel headings more readable
.panel-heading {
  line-height: 22px;
  padding: 4px 8px;

  h3 {
    font-weight: globals.$default-font-weight;
    color: globals.$ve-light-text-darker-1;
    line-height: 28px;
  }
}

// Transclude edit panel buttons
.transclude-panel-toolbar {
  .btn-tools {
    @include bootstrap.button-variant(globals.$base-grey, globals.$quaternary-grey, globals.$quaternary-grey);

    &:not(.dropdown-toggle) .fa .fa-solid .fa-regular {
      padding-right: 0;
    }

    .caret {
      opacity: 0.4;
    }
  }
}
